// 引入node中系统自带的path模块
const path = require('path')
// 引入htmlwebpackplugin插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')


module.exports = {
    entry: {
        commonCSS: './src/js/commonCSS.js',
        // 引入第三方js创建
        captcha: './src/lib/captcha/captcha-mini.js',
        swiper: './src/lib/swiper/swiper-bundle.js',
        weui: './src/lib/weui/weui.js',
        echarts: './src/lib/echarts/echarts.min.js',
        // 引入utils工具集(自己封装的js)
        common: './src/utils/common.js',
        axios: './src/utils/axios.js',
        index: './src/js/index.js',
        login: './src/js/login.js',
        advert: './src/js/advert.js',
        register: './src/js/register.js',
        mine: './src/js/mine.js',
        motion: './src/js/motion.js',
        editInfo: './src/js/editInfo.js',
        courseInfo: './src/js/courseInfo.js',
        play: './src/js/play.js',
        data: './src/js/data.js'
        // http: './src/js/http.js'
    },      // 入口
    output: {
        // 定义打包后文件输出路径
        path: path.resolve(__dirname, 'dist'),
        // 打包后文件的名字
        filename: 'js/[name].js'
    },     // 出口
    module: {       // module配置loader
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.less$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
            {
                test: /\.(png|jpg|jpeg|gif|webp|svg)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'images/[hash][ext][query]'
                }
            },
            {
                test: /\.(woff2|woff|ttf)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'fonts/[hash][ext][query]'
                }
            },
            {
                test: /\.(htm|html)$/i,
                loader: 'html-withimg-loader'
            }
        ]
    },
    optimization: {
        minimizer: [
            new CssMinimizerPlugin(),
        ],
    },
    plugins: [      // 插件
        new HtmlWebpackPlugin({
            template: './src/index.html',   // 模板页面
            filename: 'index.html', // 打包后的页面名称
            chunks: ['commonCSS', 'swiper', 'axios', 'common', 'index']
        }),
        new HtmlWebpackPlugin({
            template: './src/login.html',   // 模板页面
            filename: 'login.html', // 打包后的页面名称
            chunks: ['commonCSS', 'axios', 'common', 'login']
        }),
        new HtmlWebpackPlugin({
            template: './src/advert.html',   // 模板页面
            filename: 'advert.html', // 打包后的页面名称
            chunks: ['commonCSS', 'advert']
        }),
        new HtmlWebpackPlugin({
            template: './src/register.html',   // 模板页面
            filename: 'register.html', // 打包后的页面名称
            chunks: ['commonCSS', 'axios', 'captcha', 'common', 'register']
        }),
        new HtmlWebpackPlugin({
            template: './src/mine.html',   // 模板页面
            filename: 'mine.html', // 打包后的页面名称
            chunks: ['commonCSS', 'axios', 'common', 'mine']
        }),
        new HtmlWebpackPlugin({
            template: './src/motion.html',   // 模板页面
            filename: 'motion.html', // 打包后的页面名称
            chunks: ['commonCSS', 'axios', 'common', 'motion']
        }),
        new HtmlWebpackPlugin({
            template: './src/editInfo.html',   // 模板页面
            filename: 'editInfo.html', // 打包后的页面名称
            chunks: ['commonCSS', 'axios', 'weui', 'common', 'editInfo']
        }),
        new HtmlWebpackPlugin({
            template: './src/courseInfo.html',   // 模板页面
            filename: 'courseInfo.html', // 打包后的页面名称
            chunks: ['commonCSS', 'axios', 'common', 'courseInfo']
        }),
        new HtmlWebpackPlugin({
            template: './src/play.html',   // 模板页面
            filename: 'play.html', // 打包后的页面名称
            chunks: ['commonCSS', 'axios', 'common', 'play']
        }),
        new HtmlWebpackPlugin({
            template: './src/data.html',   // 模板页面
            filename: 'data.html', // 打包后的页面名称
            chunks: ['commonCSS', 'axios', 'echarts', 'common', 'data']
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        }),
        new CssMinimizerPlugin()
    ],
    mode: 'development'     // 模式
}
